<template>
  <div class="form-table">
    <vxe-toolbar id="toolbarId" style="height: 36px; padding-bottom: 0; margin-bottom: 0px; padding-top: 8px; text-align: right;">
      <template v-slot:buttons>
        <span class="seeMore" @click="toFreightStatistics">查看更多</span>
      </template>
    </vxe-toolbar>
    <vxe-table
      show-overflow
      :footer-method="footerMethod"
      :footer-span-method="footerColspanMethod"
      show-footer
      border
      stripe
      height="261"
      :loading="loading"
      :data="tableData">
      <vxe-table-column field="shipmentName" title="发货人" span="6"></vxe-table-column>
      <vxe-table-column field="consigneeName" title="收货人" span="6"></vxe-table-column>
      <vxe-table-column field="deliveryFeePractical" title="金额(元)" span="6"></vxe-table-column>
      <vxe-table-column field="settleTime" title="结算时间" span="6"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
  import {getFeeList4Driver} from "@/api/statistics";
  export default {
    data() {
      return {
        loading: false,
        total:0,
        feeSum:0,
        tableData: [],
      }
    },
    mounted() {
      this.getOrderList();
    },
    methods: {
      getOrderList(){
        getFeeList4Driver({isDriver1:1}).then(response => {
          let data =  response.data;
          this.total = data.total;
          this.feeSum = data.sumObject;
          this.tableData = data.records;
        })
      },
      toFreightStatistics() {
        this.$router.push('/tms/transportManage/Transport');
      },
      footerMethod({columns, data}) {
        return [
          columns.map((column, columnIndex) => {
            if (columnIndex === 0) {
              return '合计：'+this.feeSum+'元';
            }
            return null
          })
        ]
      },
      footerColspanMethod ({ columnIndex }) {
        if (columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 3
          }
        } else if (columnIndex > 1) {
          return {
            rowspan: 1,
            colspan: 0
          }
        }
      }
    }
  }
</script>
<style lang="scss" type="text/scss">
 .vxe-table {
    top: -13px;
  }
  .seeMore {
    position: relative;
    top: -8px;
    width: 48px;
    height: 12px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(24, 144, 255, 1);
    float: right;
    margin-right: 10px;;
    cursor: pointer
  }
  .form-table {
    height: 300px;
    width: 100%;
    padding: 0 10px;
    background-color: #FFFFFF;

    .vxe-footer--row .vxe-footer--column.col--ellipsis{
      border-right: 0px;
      height: 32px;
    }
    .vxe-footer--row {
      background-color: #f1f1f1;
    }
    .vxe-table .vxe-body--column.col--ellipsis {
      height: 38px;
    }
  }
</style>
